<!--
 * @title: icon组件管理
 * @author: andy.ten@tom.com & xukaixing@hotmail.com
 * @Date: 2022-04-11 13:49:10
 * @LastEditors: andy.ten@tom.com
 * @LastEditTime: 2022-04-12 18:30:51
 * @version: 1.0.1
 * @copyright: copyright (c) 2022 andyten
 *  node: you can not copy and/or use and/or modify this program free,
 *  please reserve the segment above.Please mail me if you have any question.
-->
<template>
  <div class="icons-container">
    <ht-tabs tab-position="top">
      <ht-tab-pane label="Font Icons">
        <div class="grid">
          <div v-for="item of fontIcons" :key="item" @click="handleClipboard(generateFontIconCode(item),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateFontIconCode(item) }}
              </div>
              <div class="icon-item">
                <i :class="'iconfont ht-icon-' + item" />
                <span>{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </ht-tab-pane>
      <ht-tab-pane label="Svg Icons">
        <div class="grid">
          <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateIconCode(item) }}
              </div>
              <div class="icon-item">
                <svg-icon :icon-class="item" class-name="disabled" />
                <span>{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </ht-tab-pane>
      <ht-tab-pane label="Element-UI Icons">
        <div class="grid">
          <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateElementIconCode(item) }}
              </div>
              <div class="icon-item">
                <i :class="'el-icon-' + item" />
                <span>{{ item }}</span>
              </div>
            </el-tooltip>
          </div>
        </div>
      </ht-tab-pane>
    </ht-tabs>
  </div>
</template>

<script>
import clipboard from '@/utils/ht.clipboard';
import svgIcons from './svg-icons';
import elementIcons from './element-icons';
import fontIcons from './font-icons';

export default {
  name: 'IconsMng',
  data() {
    return {
      svgIcons,
      elementIcons,
      fontIcons
    };
  },
  methods: {
    generateIconCode(symbol) {
      return `<svg-icon icon-class="${symbol}" />`;
    },
    generateElementIconCode(symbol) {
      return `<i class="el-icon-${symbol}" />`;
    },
    generateFontIconCode(symbol) {
      return `<i class="iconfont ht-icon-${symbol}" />`;
    },
    handleClipboard(text, event) {
      clipboard(text, event);
    }
  }
};
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 0 20px;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    float: left;
    width: 85px;
    height: 75px;
    margin: 15px 10px;
    font-size: 30px;
    color: #24292e;
    text-align: center;
    cursor: pointer;

    .iconfont{
      font-size:30px;
    }
  }

  span {
    display: block;
    margin-top: 10px;
    font-size: 16px;
  }

  .disabled {
    pointer-events: none;
  }
}
</style>
